<template>
  <div class="app-container">
    <el-table v-loading="loading" :data="orderList">
      <el-table-column label="序号" align="center" type="index" />
      <el-table-column label="起始地" align="center" width="400">
        <template slot-scope="scope">
          {{scope.row.departureDistrict + scope.row.departureTown + scope.row.departureAddress}}
        </template>
      </el-table-column>
      <el-table-column label="目的地" align="center" width="400">
        <template slot-scope="scope">
          {{scope.row.destinationDistrict + scope.row.destinationTown + scope.row.destinationAddress}}
        </template>
      </el-table-column>
      <el-table-column label="总重量" align="center" prop="weight" />
      <el-table-column label="订单状态" align="center" prop="state">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.transport_task_state" :value="scope.row.state"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-info"
            @click="openDialog(scope.row.orderId)"
          >详细</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-location"
            v-if="scope.row.state === 2"
            @click="showLocation(scope.row.orderId)"
          >位置</el-button>
<!--      <el-button
            size="mini"
            type="text"
            icon="el-icon-delete-solid"
            v-if="scope.row.state !== 4"
          >取消订单</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getOrders"
    />
    <OrderDialog ref="dialog" :order="orderDetail"/>
    <LocationDialog ref="location" :cargo="cargoLocations"/>
  </div>
</template>

<script>
import {getOrderList,getDetail,getCargoInfo} from '@/api/order/order.js'
import OrderDialog from "@/views/express/components/OrderDialog";
import LocationDialog from "@/views/express/components/LocationDialog";
export default {
  name: "MyOrder",
  components:{OrderDialog,LocationDialog},
  dicts:['transport_task_state'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      //用户订单表格数据
      orderList:[],
      //订单的详细信息
      orderDetail:{},
      //货物位置信息
      cargoLocations:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 运输状态时间范围
      daterangeCreateTime: [],
      // 运输状态时间范围
      daterangeUpdateTime: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        managerId: null,
        departureId: null,
        destinationId: null,
        type: null,
        weight: null,
        state: null,
        createTime: null,
        updateTime: null,
      },
      // 表单参数
    };
  },
  created() {
    this.getOrders();
  },
  methods: {
    /** 获取该用户历史订单列表 */
    // TODO
    getOrders(){
      const res = getOrderList(this.queryParams);
      res.then(response=>{
        this.orderList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    //获取订单的详细信息
    getOrderDetail(id){

      const res = getDetail(id);
      res.then(response=>{
        this.getImportant(response.data);
      })
    },

    //提取有用信息,设置响应式数据
    getImportant(data){
      this.orderDetail={};
      const { orderId,
        departureDistrict,
        departureTown,
        departureAddress,
        destinationDistrict,
        destinationTown,
        destinationAddress,
        weight,
        posterName,
        posterPhoneNumber,
        receiverName,
        receiverPhoneNumber,
        price,state
      } = data;
      let departure =  departureDistrict + departureTown + departureAddress
      let destination =  destinationDistrict + destinationTown + destinationAddress
      this.$set(this.orderDetail,'orderId',orderId);
      this.$set(this.orderDetail,'departure',departure);
      this.$set(this.orderDetail,'destination',destination);
      this.$set(this.orderDetail,'weight',weight);
      this.$set(this.orderDetail,'posterName',posterName);
      this.$set(this.orderDetail,'posterPhoneNumber',posterPhoneNumber);
      this.$set(this.orderDetail,'receiverName',receiverName);
      this.$set(this.orderDetail,'receiverPhoneNumber',receiverPhoneNumber);
      this.$set(this.orderDetail,'price',price);
      this.$set(this.orderDetail,'state',state);
    },
    //打开详细信息弹窗
    openDialog(id) {
      this.getOrderDetail(id);
      this.$refs.dialog.open();
    },
    //打开当前位置弹窗
    showLocation(id){
      console.log(id)
       const res = getCargoInfo(id);
       res.then(response=>{
         this.getLocation(response.rows);
         this.$refs.location.open();
       }).catch(error=>{
         console.log(error)
       })
    },
    //提取位置信息，设置响应式数据
    getLocation(data){
      if(this.cargoLocations){
        this.cargoLocations.splice(0,this.cargoLocations.length);
      }
      data.forEach(item=>{
        const {createTime,state,warehouse} = item;
        const obj = {createTime,state,warehouse};
        this.cargoLocations.unshift(obj);
      })
    }
  }
}
</script>

<style scoped>
.transfer-footer {
  margin-left: 20px;
  padding: 6px 5px;
}
</style>
